<template>
    <div class="detail">
        <h1>联系人详细信息</h1>
        <table width="100%">
            <tbody>
                <tr>
                    <td>姓名</td>
                    <td>{{contactDetail.name}}</td>
                </tr>
                <tr>
                    <td>年龄</td>
                    <td>{{contactDetail.age||'-' }}</td>
                </tr>
                <tr>
                    <td>性别</td>
                    <td>{{contactDetail.gender | gender }}</td>
                </tr>
                <tr>
                    <td>添加日期</td>
                    <td>{{contactDetail.create_date | date('yyyy-MM-dd hh:mm:ss')}}</td>
                </tr>
                <tr>
                    <td>最后修改日期</td>
                    <td>{{contactDetail.update_date | date('yyyy-MM-dd hh:mm:ss')}}</td>
                </tr>
                <tr>
                    <td>描述</td>
                    <td>{{contactDetail.desc||'-'}}</td>
                </tr>
            </tbody>
        </table>
    </div>
</template>
<script>
    import { mapGetters, mapActions} from 'vuex';
    export default {
        data(){
            return{};
        },
        created(){
            let contactId = this.$route.params.contactId;
            this.getContactDetail(contactId);
        },
        computed:{
            ...mapGetters([
                'contactDetail'
            ]),
        },
        methods:{
            ...mapActions([
                'getContactDetail'
            ])
        }
    }
</script>
<style scoped>
    .detail{font-size:1.25em; }
    .detail h1{font-size:1.5em; text-align:center }
    .detail tr td{padding:.6em 0;}
    .detail tr td:first-child{width:25%;text-align:right; padding-right:.5em;}


</style>